<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue2.js"></script>
  <!--    引入vue的路由-->
  <script src="../js/vue-router.js"></script>
</head>
<body>

<div id="app">
  <h3>路由的切换方式1: 通过a标签实现</h3>
  <p>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
  </p>
  <hr>
  <h3>路由的切换方式2: 通过router-link标签实现 to=""</h3>
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <hr>
  <h3>路由的切换方式3: 通过router-link标签实现 :to="{path}"</h3>
  <router-link :to="{path:'/login'}">登录</router-link>
  <router-link :to="{path:'/register'}">注册</router-link>
  <hr>
  <h3>路由的切换方式4: 通过router-link标签实现 :to="{name}"</h3>
  <router-link :to="{name:'login'}">登录</router-link>
  <router-link :to="{name:'register'}">注册</router-link>

<!--
      1. 注册账号
      2. 注册成功  ----切换路由 js => 登录页

-->
  <h3>路由的切换方式5: 通过js代码实现路由跳转</h3>
  <button @click="login">登录</button>
  <button @click="register">注册</button>

  <router-view></router-view>
</div>

<script>

  let login = {
    template: `
             <div>
                    <h2>欢迎登录</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即登录</button></p>
                    </form>
            </div>
        `
  }


  let register = {
    template: `
             <div>
                    <h2>欢迎注册</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即注册</button></p>
                    </form>
            </div>
        `

  }

  let filenotfound = {
    template: `
             <div>
                    页面找不到！！！
            </div>
        `
  }



  const routes = [
    { path: '/',redirect:'/login'},
    { path: '/login', component: login,name:'login'},
    { path: '/register', component: register,name:'register' },
    { path: '/**', component: filenotfound }
  ]


  const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })


  let vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      login(){
          //  切换路由到登录组件  路由管理对象
          console.log(this.$router)
          // this.$router.push("/login")
          this.$router.push({path:'/login'})

      },
      register(){
        //  切换路由到注册组件
        // this.$router.push("/register")
        this.$router.push({name:'register'})
      }
    },
    components: {
      login, register,filenotfound
    },
    router
  })

</script>
</body>
</html>